\<template>
  <div id="teacherSyllabusContainer" class="container">
    <div class="content">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item
          class="title"
          :to="{ path: '/system_set/course_library' }"
          v-if="isFromCourse == '1'"
        >课程库管理</el-breadcrumb-item>
        <el-breadcrumb-item
          class="title"
          :to="{ path: '/system_set/curriculum_setting' }"
          v-else
        >课程管理</el-breadcrumb-item>
        <el-breadcrumb-item class="title">{{title}}</el-breadcrumb-item>
      </el-breadcrumb>
      <div class="panel">
        <table class="table" cellspacing="0" style="table-layout:fixed;">
          <thead class="thead">
            <tr>
              <td style="width: 4rem;">课节序号</td>
              <td style="width: 4rem;">课节名称</td>
              <td style="width: 4rem;">课节时长</td>

              <td style="width: 6rem;">课节资源</td>
              <td style="width: 0.1rem;"></td>
              <td style="width: 6rem;">教参资源</td>
              <td style="width: 6rem;">操作</td>
              <td style="width: 2rem;" v-if="courseTypeId == 4">编辑</td>
            </tr>
          </thead>
          <tbody class="tbody">
            <tr v-for="item,index in teacherSyllabusList">
              <td>{{item.orderBy}}次课</td>
              <td v-if="item.isEdit">
                <el-input
                  placeholder="请输入课节名称"
                  v-model="item.syllabusName"
                  @blur.prevent="itemEdit(item)"
                  :id="item.libraryCourseId"
                >
                  <i
                    slot="suffix"
                    class="el-input__icon el-icon-edit"
                    style="cursor: pointer;"
                    @click="itemEdit(item)"
                  ></i>
                </el-input>
              </td>
              <td v-else @click="goSyllabus(item)" style="cursor: pointer;">
                <div style="display: flex;justify-content: center;align-items: center;">
                  <div v-if="item.feiboLessonId != null" class="name_img_teacher"></div>
                  <div style="margin-left:0.05rem">
                    {{item.syllabusName == null?"未命名":item.syllabusName}}
                    <i
                      class="el-icon-edit nameEdit"
                      @click.stop="openEdit(item)"
                    ></i>
                  </div>
                </div>
              </td>
              <td>{{item.oneSyllabusDuration}}分钟</td>
              <td>
                <div
                  @click="goSyllabus(item)"
                  style="cursor: pointer;line-height: 0.52rem;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;"
                  :title="item.resourceListName"
                >{{item.resourceListName}}</div>
              </td>
              <td></td>
              <td>
                <div
                  @click="goReference(item)"
                  style="cursor: pointer;line-height: 0.52rem;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;"
                  :title="item.referenceListName"
                >{{item.referenceListName}}</div>
              </td>
              <td style="min-width:2.5rem;">
                <span
                  :class="{operate_btn:!item.uploadFailedOfLesson,failOperate_btn:item.uploadFailedOfLesson}"
                  @click="goSyllabus(item,1)"
                >上传课节资源&nbsp;</span>
                <span
                  :class="{operate_btn:!item.uploadFailedOfTeachingReference,failOperate_btn:item.uploadFailedOfTeachingReference}"
                  @click="goReference(item,1)"
                >上传教参资源</span>
              </td>
              <!-- <td>
                <div class="syllabusRes" @click="goSyllabus(item)"></div>
              </td>
              <td>
                <div class="syllabusRes" @click="goReference(item)"></div>
              </td>-->
              <td v-if="courseTypeId == 4">
                <div class="edit_btn" v-if="item.feiboLessonId == null">
                  <div
                    :class="{btn_img_up_disable:index == 0 ,btn_img_up:index != 0}"
                    @click="resourceMove('up',index)"
                  ></div>
                  <div
                    :class="{btn_img_down_disable:index == teacherSyllabusList.length-1 ,btn_img_down:index != teacherSyllabusList.length-1}"
                    @click="resourceMove('down',index)"
                  ></div>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
        <el-pagination
          class="page"
          layout="total, prev, pager, next, jumper"
          :current-page="tabledisplayObj.currPage"
          @current-change="tabledisplayChangePage"
          :total="tabledisplayObj.total"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
var vm;
export default {
  data: function() {
    return {
      title: "",
      isFromCourse: "1",
      courseTypeId: "",
      tabledisplayObj: {
        libraryCourseId: "",
        currPage: "",
        pageSize: 10,
        total: 0
      },
      teacherSyllabusList: []
    };
  },
  methods: {
    /**编辑名称 */
    openEdit: function(item) {
      item.isEdit = true;
      vm.$nextTick(() => {
        $("#" + item.libraryCourseId).focus();
      });
    },
    /**
     * @param {Object} direction 方向
     * @param {Object} itemIndex 位置
     */
    resourceMove(direction, itemIndex) {
      if (
        (itemIndex == 0 && direction == "up") ||
        (itemIndex == vm.teacherSyllabusList.length - 1 && direction == "down")
      )
        return;
      let paras = {
        oneSyllabusId: 0,
        oneOrderBy: 0,
        twoSyllabusId: 0,
        twoOrderBy: 0
      };
      console.log(itemIndex);
      vm.teacherSyllabusList.forEach((item, index) => {
        console.log(item, index);
        //拿到当前item
        if (index == itemIndex) {
          paras.oneSyllabusId = item.syllabusId;
          paras.oneOrderBy = item.orderBy;
        }
        //向上移动则拿到前一个item，否则拿后一个
        if (direction == "up") {
          if (index == itemIndex - 1) {
            paras.twoSyllabusId = item.syllabusId;
            paras.twoOrderBy = item.orderBy;
          }
        } else {
          if (index == itemIndex + 1) {
            paras.twoSyllabusId = item.syllabusId;
            paras.twoOrderBy = item.orderBy;
          }
        }
      });
      api.libraryExchangeOrder(paras).then(function(data) {
        if (data.resultCode == 2000) {
          vm.initData();
        } else {
          vm.$message.error(data.message);
        }
      });
    },
    //上传教参资源
    goReference(item,isUpload) {
      let queryObj = {
        courseTypeId: vm.courseTypeId,
        r: vm.tabledisplayObj.libraryCourseId,
        title: vm.title,
        currPage: vm.tabledisplayObj.currPage,
        subTitle:
          item.syllabusName == null
            ? "第" + item.orderBy + "次课"
            : item.syllabusName,
        syllId: "",
        referId: "",
        syllBosUrl: "",
        referBosUrl: "",
        isFromCourse: vm.isFromCourse
      };
      if(isUpload && isUpload == 1){
        queryObj.isUpload = isUpload;
      }
      let paras = {
        syllabusId: item.syllabusId,
        lessonFileType: 2
      };
      api
        .getLinkResource(paras)
        .then(function(data) {
          if (data.resultCode == 2000) {
            if (data.info == "{}") return;
            queryObj.referId = data.info.resourceId;
            queryObj.referBosUrl = data.info.bosResourceUrl;
            let param = {
              syllabusId: item.syllabusId,
              lessonFileType: 1
            };
            return api.getLinkResource(param);
          } else {
            vm.$message.error(data.message);
          }
        })
        .then(function(data) {
          if (data.resultCode == 2000) {
            if (data.info == "{}") return;
            queryObj.syllId = data.info.resourceId;
            queryObj.syllBosUrl = data.info.bosResourceUrl;
            var path = vm.$store.state.permit["58"].path;
            //传递参数
            vm.$router.push({
              path: path,
              query: queryObj
            });
          } else {
            vm.$message.error(data.message);
          }
        });
    },
    //上传课节资源
    goSyllabus(item,isUpload) {
      let queryObj = {
        courseTypeId: vm.courseTypeId,
        r: vm.tabledisplayObj.libraryCourseId,
        title: vm.title,
        currPage: vm.tabledisplayObj.currPage,
        subTitle:
          item.syllabusName == null
            ? "第" + item.orderBy + "次课"
            : item.syllabusName,
        syllId: "",
        referId: "",
        syllBosUrl: "",
        referBosUrl: "",
        isFromCourse: vm.isFromCourse
      };
      if(isUpload && isUpload == 1){
        queryObj.isUpload = isUpload;
      }
      let paras = {
        syllabusId: item.syllabusId,
        lessonFileType: 2
      };
      api
        .getLinkResource(paras)
        .then(function(data) {
          if (data.resultCode == 2000) {
            if (data.info == "{}") return;
            queryObj.referId = data.info.resourceId;
            queryObj.referBosUrl = data.info.bosResourceUrl;
            let param = {
              syllabusId: item.syllabusId,
              lessonFileType: 1
            };
            return api.getLinkResource(param);
          } else {
            vm.$message.error(data.message);
          }
        })
        .then(function(data) {
          if (data.resultCode == 2000) {
            if (data.info == "{}") return;
            queryObj.syllId = data.info.resourceId;
            queryObj.syllBosUrl = data.info.bosResourceUrl;
            var path = vm.$store.state.permit["57"].path;
            //传递参数
            vm.$router.push({
              path: path,
              query: queryObj
            });
          } else {
            vm.$message.error(data.message);
          }
        });
    },
    itemEdit(item) {
      api.syllabusUpdate(item).then(function(data) {
        if (data.resultCode == 2000) {
        } else {
          vm.$message.error(data.message);
        }
        vm.initData();
      });
    },
    initData() {
      api.librarySyllabusList(vm.tabledisplayObj).then(function(data) {
        if (data.resultCode == 2000) {
          data.list.forEach(item => {
            item.isEdit = false;
            item.resourceListName = "";
            item.referenceListName = "";
            item.lessonFileResourceList.forEach(ele => {
              let len = ele.resourceName.lastIndexOf(".");
              let fileType = ele.resourceName.substring(len); //文件类型
              if (fileType == ".url") {
                item.resourceListName +=
                  item.resourceListName == ""
                    ? ele.resourceName.substring(0, len) + "(h5链接)"
                    : "," + ele.resourceName.substring(0, len) + "(h5链接)";
              } else {
                item.resourceListName +=
                  item.resourceListName == ""
                    ? ele.resourceName
                    : "," + ele.resourceName;
              }
            });
            item.teachingReferenceFileResourceList.forEach(ele => {
              let len = ele.resourceName.lastIndexOf(".");
              let fileType = ele.resourceName.substring(len); //文件类型
              if (fileType == ".url") {
                item.referenceListName +=
                  item.referenceListName == ""
                    ? ele.resourceName.substring(0, len) + "(h5链接)"
                    : "," + ele.resourceName.substring(0, len) + "(h5链接)";
              } else {
                item.referenceListName +=
                  item.referenceListName == ""
                    ? ele.resourceName
                    : "," + ele.resourceName;
              }
            });
          });
          vm.tabledisplayObj.total = data.totalCount;
          vm.teacherSyllabusList = data.list;
        } else {
          vm.$message.error(data.message);
        }
      });
    },
    /**表格显示形式翻页 */
    tabledisplayChangePage(val) {
      vm.tabledisplayObj.currPage = val;
      vm.initData();
    }
  },
  mounted() {
    let libraryCourseId = this.$route.query.libraryCourseId;
    let courseTypeId = this.$route.query.courseTypeId;
    let title = this.$route.query.title;
    let isFrom = this.$route.query.isFrom;
    vm.title = title;
    vm.isFromCourse = isFrom;
    vm.tabledisplayObj.libraryCourseId = libraryCourseId;
    vm.courseTypeId = courseTypeId;
    vm.initData();
  },
  created: function() {
    vm = this;
    let currPage = this.$route.query.currPage;
    vm.tabledisplayObj.currPage = currPage ? parseInt(currPage) : 1;
  }
};
</script>
<style lang="scss">
#teacherSyllabusContainer {
  .el-form-item__label {
    font-size: 0.16rem;
    color: #666666;
  }

  .el-checkbox__label {
    font-size: 0.16rem;
    color: #666666;
  }

  .nameEdit {
    margin-left: 0.1rem;
    cursor: pointer;
  }

  .syllabusRes {
    text-decoration: underline;
    color: #3885f8;
    font-size: 0.16rem;
    cursor: pointer;
  }
  .name_img_teacher {
    min-width: 0.26rem;
    height: 0.26rem;
    background-image: url("../../assets/img/system_set/teacher.png");
    background-repeat: no-repeat;
    background-size: 0.26rem;
  }

  .right_btn {
    width: 1rem;
    height: 0.38rem;
    line-height: 0.38rem;
    float: right;
    font-size: 0.16rem;
    font-weight: bold;
    border-radius: 0.1rem;
    text-align: center;
    cursor: pointer;
    background-color: #3885f8;
    color: white;
  }

  .right_btn:hover {
    background-color: rgba(56, 133, 248, 0.8);
  }
  .el-breadcrumb__separator {
    color: #999999;
  }
  .el-breadcrumb__inner.is-link {
    font-weight: 400;
    color: #333333;
  }
  .el-breadcrumb__inner.is-link:hover {
    color: #3885f8;
  }
  .el-breadcrumb__item:last-child .el-breadcrumb__inner {
    color: #3885f8;
  }
  .failOperate_btn {
    font-size: 0.16rem;
    padding-left: 0.32rem;
    cursor: pointer;
    background-repeat: no-repeat;
    background-size: 0.16rem;
    background-position: 0.16rem center;
    color: #ff293e;
    background-image: url(../../assets/img/system_set/error.png);
  }
  .edit_btn {
    display: flex;
    justify-content: center;
    align-content: center;
    text-align: center;
    height: 0.26rem;
    line-height: 0.26rem;

    .btn_img_down {
      color: #3885f8;
      padding-left: 0.35rem;
      background-image: url("../../assets/img/internal_manage/down.png");
      background-repeat: no-repeat;
      background-size: 0.2rem;
      background-position: 0.1rem center;
      cursor: pointer;
    }

    .btn_img_down_disable {
      color: #3885f8;
      padding-left: 0.35rem;
      background-image: url("../../assets/img/internal_manage/down.png");
      background-repeat: no-repeat;
      background-size: 0.2rem;
      background-position: 0.1rem center;
      cursor: pointer;
      opacity: 0.4;
      filter: alpha(opacity=40); /* 针对 IE8 以及更早的版本 */
    }

    .btn_img_up_disable {
      color: #3885f8;
      padding-left: 0.35rem;
      background-image: url("../../assets/img/internal_manage/up.png");
      background-repeat: no-repeat;
      background-size: 0.2rem;
      background-position: 0.1rem center;
      opacity: 0.4;
      filter: alpha(opacity=40); /* 针对 IE8 以及更早的版本 */
      cursor: pointer;
    }

    .btn_img_up {
      color: #3885f8;
      padding-left: 0.35rem;
      background-image: url("../../assets/img/internal_manage/up.png");
      background-repeat: no-repeat;
      background-size: 0.2rem;
      background-position: 0.1rem center;
      cursor: pointer;
    }
  }
}
</style>
<style scoped src="@/style/module/table.css"></style>
<style scoped src="@/style/clue_manage/clue_manage.css"></style>
<style scoped>
</style>
